<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';

const columns = ref(['全部', '检查科', '门诊科']);
const value = ref('全部');

function handleConfirm({ value }) {
  value.value = value;
}

function handleSearch() {}

const recordOfFees = ref([
  {
    id: '1',
    itemName: '血常规',
    price: '10',
    desc: '血液常规检查'
  },
  {
    id: '2',
    itemName: '尿常规',
    price: '10',
    desc: '尿液常规检查'
  },
  {
    id: '3',
    itemName: '心电图',
    price: '10',
    desc: '心电图检查'
  },
  {
    id: '4',
    itemName: '普通门诊挂号费',
    price: '20',
    desc: '普通门诊挂号'
  },
  {
    id: '5',
    itemName: '专家门诊挂号费',
    price: '50',
    desc: '专家门诊挂号'
  },
  {
    id: '6',
    itemName: 'CT检查',
    price: '100',
    desc: 'CT检查'
  },
  {
    id: '7',
    itemName: '核磁共振',
    price: '200',
    desc: '核磁共振检查'
  },
  {
    id: '8',
    itemName: 'B超',
    price: '100',
    desc: 'B超检查'
  },
  {
    id: '9',
    itemName: 'X光片',
    price: '100',
    desc: 'X光片检查'
  },
  {
    id: '10',
    itemName: '胃镜检查',
    price: '200',
    desc: '胃镜检查'
  },
  {
    id: '11',
    itemName: '肠镜检查',
    price: '200',
    desc: '肠镜检查'
  }
]);
</script>

<template>
  <view class="page flex-col">
    <AuthBar />
    <view class="flex-col flex-1 overflow-auto pb-40 pt-58">
      <view class="page-title">
        医疗服务费用标准
      </view>
      <view class="search flex-center items-start">
        <view class="w-750 flex">
          <view class="relative mr-12 w-128">
            <wd-picker v-model="value" :columns="columns" title="选择搜索类型" use-default-slot @confirm="handleConfirm">
              <wd-input :placeholder="value" readonly />
            </wd-picker>

            <view class="select-arrow">
              <wd-icon name="arrow-down" size="22px" color="var(--primary)" />
            </view>
          </view>

          <view class="relative mr-36 flex-1 self-start">
            <wd-input placeholder="请输入汉字/拼音首字母进行项目模糊搜索" />
            <view class="search-btn">
              <wd-button @click="handleSearch">
                搜索
              </wd-button>
            </view>
          </view>
        </view>
      </view>

      <view class="page-content mx-48 flex-1 overflow-auto">
        <view class="pay-table mt-40">
          <view class="pay-table__header sticky top-0 z-1">
            <view class="pay-header__row">
              <view class="col">
                项目名称
              </view>
              <view class="col">
                费用
              </view>
              <view class="col">
                说明
              </view>
            </view>
          </view>
          <view class="pay-table__body">
            <view v-for="item in recordOfFees" :key="item.id" class="pay-table__row">
              <view class="col">
                <view>{{ item.itemName }}</view>
              </view>
              <view class="col">
                {{ item.price }}元
              </view>
              <view class="col">
                {{ item.desc }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="mt-45 px-50">
        <view class="page-tips">
          <view class="tips-title">
            <wd-icon name="help-circle" size="32px" /> 使用提示
          </view>
          <view class="tips-content">
            <view>
              以上费用仅供参考，实际费用以医院最新规定和医生开具的检查项目为准。医保患者可按规定报销部分费用。
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '价格公示',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .search {
    padding: 38px 48px;
    --wot-input-inner-height: 68px;
    --wot-input-fs: 20px;
    --wot-input-placeholder-color: #767676;

    :deep(.wd-input) {
      border-radius: 8px;
      background: #eff5ff;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      padding-left: 20px;

      &:after {
        background: transparent;
      }
    }

    .search-btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      :deep(.wd-button) {
        width: 98px;
        height: 100%;
        background: var(--primary);
        color: #fff;
        border-radius: 0px 6px 6px 0px;
        font-size: 26px;
      }
    }

    .select-arrow {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .page-content {
    border: 2px solid #e6effd;
    background: #d8e7ff;
    border-radius: 20px;
    padding: 0 40px 40px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .page-title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
  }

  .pay-table {
    width: 100%;
    display: table;
    table-layout: fixed;
    border: 1px solid #a4c5f9;
    .pay-table__header {
      display: table-header-group;
      .pay-header__row {
        display: table-row;
        background: var(--primary);
      }

      .col {
        display: table-cell;
        color: #fff;
        font-size: 32px;
        padding: 30px 12px;
        text-align: center;
        box-sizing: border-box;
        background: var(--primary);
        border-top: 2px solid rgba(255, 255, 255, 0.5);
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 4px;
          height: 22px;
          background: #fff;
        }

        &:first-child {
          border-radius: 10px 0 0 10px;
        }
        &:last-child {
          border-radius: 0 10px 10px 0;
          &::after {
            display: none;
          }
        }
      }
    }

    .pay-table__body {
      display: table-row-group;
      .pay-table__row {
        display: table-row;
        .col {
          display: table-cell;
          font-size: 28px;
          text-align: center;
          color: #3d3d3d;
          padding: 32px 0;
          border-bottom: 1px solid #a4c5f9;
        }
      }
    }
  }

  .page-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 31px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
